<!doctype html>
<!--[if lt IE 7]> <html class1="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Description" content="angular translate brings internationalization (i18n) and localization (l10n) to your Angular apps!">
    <meta name="fragment" content="!">
    <title>angular translate - i18n for your Angular apps, made easy.</title>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="docs/en/css/bootstrap.min.css">
    <link rel="stylesheet" href="docs/en/css/animations.css">
    <link rel="stylesheet" href="docs/en/css/docs.css">
    <link rel="stylesheet" href="docs/en/css/font-awesome.css">
    <link rel="stylesheet" href="docs/en/css/styles.css">

    <script src="docs/en/js/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.2/angular-translate.js"></script>
    <script src="docs/en/js/docs-setup.js"></script>
    <script src="docs/en/js/docs.js"></script>
    <script>
      var app = angular.module('at', ['pascalprecht.translate']);

      app.config(function ($translateProvider) {
        $translateProvider.translations('en', {
          TITLE: 'Hello',
          FOO: 'This is a paragraph.',
          BUTTON_LANG_EN: 'english',
          BUTTON_LANG_DE: 'german'
        });
        $translateProvider.translations('de', {
          TITLE: 'Hallo',
          FOO: 'Dies ist ein Absatz.',
          BUTTON_LANG_EN: 'englisch',
          BUTTON_LANG_DE: 'deutsch'
        });
        $translateProvider.preferredLanguage('en');
        $translateProvider.useSanitizeValueStrategy('escape');
      });

      app.controller('Ctrl', function ($scope, $translate) {
        $scope.changeLanguage = function (key) {
          $translate.use(key);
        };
      });
    </script>
  </head>

  <body ng-app="at">
    <header class="header">
      <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
            <li>
            <a href="docs/en/#/guide"><i class="icon-book"></i> Getting Started</a>
              </li>
              <li>
              <a href="docs/en/#/api"><i class="icon-book"></i> API</a>
            </li>
          </ul>
          <ul class="nav pull-right">
            <li><a href="https://angular-translate.github.io/docs/plato/"><i class="icon-signal"></i> Plato Report</a></li>
            <li><a href="https://github.com/angular-translate/angular-translate"><i class="icon-github-sign"></i> View on GitHub</a></li>
          </ul>
          </div>
        </div>
      </div>
      </header>

      <div role="main" class="masthead">
        <div class="container">
          <img src="docs/en/img/logo/angular-translate-alternative/angular-translate_alternative_medium2.png">
          <p class="tagline">i18n for your Angular apps, made easy</p>
          <p><a href="https://github.com/angular-translate/bower-angular-translate/releases" class="btn btn-primary btn-large"><i class="icon-download"></i> Download</a>
          <a href="https://github.com/angular-translate/angular-translate" class="btn btn-primary btn-large"><i class="icon-github-sign"></i> View on GitHub</a></p>
        </div>
      </div>
      <div class="divider"></div>
      <div class="main container">
        <div class="intro">
          <div class="row">
            <div class="span4">
              <h2>What?</h2>
              <p>angular-translate is an <a href="https://angularjs.org">AngularJS</a> module that makes your life much easier when it comes to <strong>i18n</strong> and <strong>l10n</strong> including lazy loading and pluralization.</p>
            </div>

            <div class="span4">
              <h2>Features</h2>

              <p>It provides components like filters and directives, asynchronous loading of i18n data, full pluralization support through <a href="https://github.com/SlexAxton/messageformat.js">MessageFormat</a> and much more!</p>
            </div>

            <div class="span4">
              <h2>Flexibility</h2>

              <p>angular-translate is very flexible. You can build <strong>your own</strong> loaders, storages or error handlers and extend angular-translate to your needs!</p>
            </div>
          </div>
        </div>
        <hr>

        <div class="example">
          <div class="row">
            <h1 class="span12">How it works</h1>
            <div class="span8">
              <pre class="prettyprint linenums">
var app = angular.module('at', ['pascalprecht.translate']);

app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Hello',
    FOO: 'This is a paragraph.',
    BUTTON_LANG_EN: 'english',
    BUTTON_LANG_DE: 'german'
  });
  $translateProvider.translations('de', {
    TITLE: 'Hallo',
    FOO: 'Dies ist ein Absatz.',
    BUTTON_LANG_EN: 'englisch',
    BUTTON_LANG_DE: 'deutsch'
  });
  $translateProvider.preferredLanguage('en');
});

app.controller('Ctrl', function ($scope, $translate) {
  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };
});</pre>
            </div>
            <div class="span4">
              <div class="well">
                  <h2 translate="TITLE">Hello</h2>
                  <p translate="FOO">This is a paragraph</p>
              </div>
              <div ng-controller="Ctrl">
                <button class="btn" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN" class="ng-scope">english</button>
                <button class="btn" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE" class="ng-scope">german</button>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="peeps">
          <div class="row">
            <h1 class="span12">What people say</h1>
            <blockquote class="span6">
              <p>When building a product with global reach, angular-translate is a must-have addition to AngularJS. It integrates seamlessly with your application, making internationalization as easy as maintaining a few files containing all translations. angular-translate works very nicely with all AngularJS dynamic data-binding features, making it a breeze to switch languages on-the-fly. Highly recommended! </p>
              <footer>
                <span>- <strong>Sander Mak</strong>, Luminis Technologies</span>
              </footer>
            </blockquote>

            <blockquote class="span6">
              <p>I looked for some localization stuff to bring translations from server to client. There were some modules for i18n, but they didn't match all my needs. Then I found an angular-translate and I loved this module! Seriously. I was really surprised by its quality and support. It's also really awesome that the author of angular-translate is always open for new ideas!</p>
              <footer>
              <span>- <strong>Max Prichinenko</strong>, Freelancer</span>
              </footer>
            </blockquote>
          </div>
          <div class="row">

            <blockquote class="span6">
              <p>I needed i18n and l10n support on a new project that integrated well with AngularJS, angular-translate fits the bill perfectly. Plenty of features, well thought out interfaces and the documentation is clear and easy to follow. IMO this is the best framework I've seen written with AngularJS</p>
              <footer>
                <span>- <strong>Chris Jones</strong>, Waters Corporation</span>
              </footer>
            </blockquote>
          </div>
        </div>
        <hr>
        <div class="companies">
          <div class="row">
            <h1 class="span12">Who uses it?</h1>
            <ul class="span12">
              <li><a href="http://neoskop.de"><img src="http://www.neoskop.de/assets/css/img/logo.png"></a></li>
              <li><a href="http://luminis-technologies.com"><img src="http://www.luminis-technologies.com/img/lt-logo.gif"></a></li>
              <li><a href="https://jhipster.github.io"><img src="https://raw.github.com/jhipster/jhipster.github.io/master/images/logo_jhipster.png"></a></li>
            </ul>
          </div>
        </div>
      </div>
      <footer class="footer">
        <div class="container">
          <p>Brought to you by <a href="https://github.com/PascalPrecht"> <img width="40" height="40" src="https://secure.gravatar.com/avatar/b32bdb1fc9fdadeb45d7a1267fdd2fc4?s=40"> Pascal Precht</a> <a href="http://github.com/knalli"><img height="210" src="https://secure.gravatar.com/avatar/6c349ffd9793132e1d217f0de572e080?s=40" width="40" height="40"> Jan Philipp</a> <a href="http://github.com/DWand"><img height="40" width="40" src="https://secure.gravatar.com/avatar/2146036b95ee605ca39779b958cd54ce?s=40"> Max Prichinenko</a> and many <a href="http://github.com/PascalPrecht/angular-translate/contributors">others</a></p>

            <p>Logo designed by <a href="http://stefankroeckel.tumblr.com/">Stefan Kröckel</a></p>
        </div>
      </footer>
  </body>
</html>
